<template>
  <div class="kui-content-wrap">
    <div class="kui-wrap-desk kui-flex kui-flex-between kui-flex-middle">
      <Breadcrumb class="kui-desk-nav">
        <BreadcrumbItem to="/">我的工作台</BreadcrumbItem>
        <BreadcrumbItem to="/staff">员工管理</BreadcrumbItem>
        <BreadcrumbItem>新增员工</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="kui-wrap-body">
      <div class="kui-body-section">
        <div class="kui-section-item">
          <div class="kui-item-bd">
            <Form class="kui-form-panel" ref="formData" :rules="ruleValidate" :model="temporaryData" :label-width="90" label-position="left">
              <FormItem label="登录账号：" prop="account">
                <Input v-model="temporaryData.account" style="width:294px" clearable  placeholder="请输入"/>
              </FormItem>
              <FormItem label="登录密码：" prop="password">
                <Input v-model="temporaryData.password" style="width:294px" clearable  placeholder="请输入"/>
              </FormItem>
              <FormItem label="名称：" prop="name">
                <Input v-model="temporaryData.name" style="width:294px" clearable placeholder="请输入"/>
              </FormItem>
              <FormItem label="电话：" prop="phone">
                <Input v-model="temporaryData.phone" style="width:294px" clearable placeholder="请输入"/>
              </FormItem>
              <FormItem label="职位：">
                <Input v-model="temporaryData.job" style="width:294px" clearable placeholder="请输入"/>
              </FormItem>
              <FormItem label="状态标识：">
                <Select v-model="temporaryData.state" style="width:294px" placeholder="请选择">
                  <Option :value="-1">锁定</Option>
                  <Option :value="1">正常</Option>
                </Select>
              </FormItem>
              <FormItem label="角色标识：">
                <Select v-model="temporaryData.rid" style="width:294px" placeholder="请选择">
                    <Option :value="1">超级管理</Option>
                    <Option :value="2">普通员工</Option>
                </Select>
              </FormItem>
              <FormItem label="短信提醒：">
                <Select v-model="temporaryData.is_phone" style="width:294px" placeholder="请选择">
                    <Option :value="1">提醒</Option>
                    <Option :value="2">不提醒</Option>
                </Select>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="clickPostData">保存新增</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      temporaryData: {
        state: 1,
        rid: 2,
        is_phone: 1
      },
      ruleValidate: {
                    account: [
                        { required: true, message: '请输入登录账号', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入名字', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入登录密码', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入联系电话', trigger: 'blur' }
                    ]
                }
    }
  },
  methods: {
    //链接数据
    async postData(list) {
      const app = this
      let { data } = await app.$axios.post('/master/v1/user', list)
      if (data.code === 100) {
        app.$Message.success('保存成功')
        app.$router.push('/staff')
      } else {
        app.$Message.error(data.msg)
      }
    },
    clickPostData() {
      this.postData(this.temporaryData)
      this.temporaryData = {
        state: 1
      }
    },
    cancel() {
      this.temporaryData = {}
    }
  },
}
</script>

<style lang="less" scoped></style>
